import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Mainright from "../../../../src/components/Mainright";
import Swiper from '../../../components/Swiper'
import { StoreDis, StoreItem } from "../../../utils";
import { useDispatch, useSelector } from "react-redux";
import { getList } from "../../../api/index";
import QueueAnim from 'rc-queue-anim';
//tab
import { Tabs } from "react-vant";

type Props = {};
const Index = (props: Props) => {
  const navigate = useNavigate();
  const discth: StoreDis = useDispatch();
  useEffect(() => {
    getdata();
  }, []);

  const getdata = () => {
    getList().then((res: any) => {
      discth({
        type: "ADD_LIST",
        payload: res.data.data,
      });
    });
  };

  //从仓库获取数据
  const list = useSelector((store: any) => store.reducer.list);

  console.log(list);
  //点击收藏
  return (
    <div className="articlesbox">
      <div className="mainleft">
        {/* 轮播 */}
        <div className="swiper">
         <Swiper></Swiper>
        </div>
        {/* tab切换 */}
        <div className="mainTab">
          <h1></h1>

          <div className="add_nei">
            <ul>
              {/* {
                          list && list.map((item:any,index:number)=>{
                            return <li key={index}>
                              <h3>{item.title}</h3><br />
                                    <img src={item.cover} alt="" />
                            </li>
                          })
                        } */}

              <div className="demo-tabs">
                <Tabs active={0}>
                  {list &&
                    list.map((item: any, index: number) => {
                      return (
                        <Tabs.TabPane key={index} title={item.title}>
                            <QueueAnim delay={1000} type={['right', 'left']} className="queue-simple">
                          {
                            list && list.map((v:any,i:number)=>{
                              return <li key={i} onClick={()=>navigate('/home/Details/'+item.id,{state:item})}>
                                
                                  <h3>
                                  {v.title}
                                  <span className="span1">3天前</span> &emsp;
                                  {/* <span className="span1">{v}</span> */}
                                </h3>
                                <div className="div_ul1">
                                  <img src={v.cover} alt="" />
                                  <span>{v.summary}</span>
                                </div>
                              </li>
                            })
                          }
                          </QueueAnim>
                          {/* {list && list.map((item1: any, index: number) => {
                            return (
                              <li key={index}>
                                <h3>
                                  {item1.title}{" "}
                                  <span className="span1">3天前</span> &emsp;{" "}
                                  <span className="span1">{item1}</span>
                                </h3>

                                <div className="div_ul1">
                                  {" "}
                                  <img src={item1.cover} alt="" />{" "}
                                  {item1.summary}
                                </div>
                              </li>
                            );
                          })} */}
                        </Tabs.TabPane>
                      );
                    })}
                </Tabs>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <Mainright></Mainright>
    </div>
  );
};

export default Index;
